<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="favicon.ico">
  <title>
  </title>
</head>

<body>
  <form action="" method="get">
    <!-- autocomplete 自动补全 -->
    <input type="text" autocomplete="on" autofocus>
  </form>
  <script src="./vue.js"></script>
  <!-- <script>
    let back = confirm("确认18了吗")
    console.log(back);
  </script> -->
  <div id="app">
    {{aa}}
    <input v-model="aa" type="text" />
    <div>
      {{aa}}
    </div>
  </div>

  <script>
    let vm = new Vue({
      data () {
        return {
          aa: "标题"
        }
      },
      setup () {
        // 只有this uve3 this 也是null
        console.log("this-->", this);
        console.log("this.$data-->", this.$data);
        console.log("this.$el-->", this.$el);
      },
      // 创建之前 this已经好了 数据和标签
      beforeCreate () {
        console.log("beforeCreate--------------");
        // 只有this uve2
        console.log("this-->", this);
        console.log("this.$data-->", this.$data);
        console.log("this.$el-->", this.$el);
      },
      // 创建好了,数据好了,标签没有
      created() {
        console.log("created--------------");
        // 只有this uve2
        console.log("this-->", this);
        console.log("this.$data-->", this.$data);
        console.log("this.$el-->", this.$el);
      },
      // 渲染,挂在数据,没有将数据,放到html里边
      beforeMount() {
        console.log("beforeMount--------------");
        // 只有this uve2
        console.log("this-->", this);
        console.log("this.$data-->", this.$data);
        console.log("this.$el-->", this.$el);
        this.$data.aa = "改变了"
      },
      // 数据和标签整合到一起了
      mounted() {
        console.log("mounted--------------");
        // 只有this uve2
        console.log("this-->", this);
        console.log("this.$data-->", this.$data);
        console.log("this.$el-->", this.$el);
        
      },
      // 页面数据更新之前
      beforeUpdate() {
        console.log("beforeUpdate--------------");
        // 只有this uve2
        console.log("this-->", this);
        console.log("this.$data-->", this.$data);
        console.log("this.$el-->", this.$el);
      },
      // 数据更新了
      updated() {
        console.log("updated--------------");
        // 只有this uve2
        console.log("this-->", this);
        console.log("this.$data-->", this.$data);
        console.log("this.$el-->", this.$el);
      },
      // 卸载之前
      beforeDestroy() {
        
      },
      // 当前标签卸载了
      destroyed() {
        
      }
    }).$mount("#app")
  </script>
  <!-- built files will be auto injected -->
</body>

</html>